/* style.css */

.banner-principal {
  width: 800px; /* Ajusta el ancho según tus necesidades */
  height: 300px; /* Ajusta la altura según tus necesidades */
  margin: 0 auto; /* Centra el banner horizontalmente */
  background-color: #f0f0f0; /* Color de fondo del banner */
  position: relative; /* Permite el posicionamiento absoluto para el texto animado */
}

.seccion-imagen {
  width: 300px; /* Ancho de cada sección de imagen */
  height: 200px; /* Altura de cada sección de imagen */
  float: left; /* Alinea las secciones de imagen en fila */
  background-size: cover; /* Ajusta la imagen al tamaño de la sección */
  background-position: center; /* Centra la imagen dentro de la sección */
}

#imagen1 {
  background-image: url("https://apcr.neocities.org/AgenciaTica%20/banner%20/20de448aa8aae92d2916d482bb58b7e1.jpg
  "); /* Ruta de la primera imagen */
}

#imagen2 {
  background-image: url "https://apcr.neocities.org/AgenciaTica%20/banner%20/20de448aa8aae92d2916d482bb58b7e1.jpg
  
  
  "; /* Ruta de la segunda imagen */
}

#imagen3 {
  background-image: url("imagen3.jpg"); /* Ruta de la tercera imagen */
}

.seccion-texto {
  position: absolute; /* Posicionamiento absoluto para colocarlo sobre las imágenes */
  top: 50%; /* Posiciona verticalmente en el centro */
  left: 50%; /* Posiciona horizontalmente en el centro */
  transform: translate(-50%, -50%); /* Compensa la mitad del tamaño del texto */
  font-size: 30px; /* Tamaño de la fuente */
  font-weight: bold; /* Peso de la fuente */
  color: #333; /* Color del texto */
  text-align: center; /* Alineación central del texto */
}

#texto-animado {
  animation: animacion-texto 2s infinite; /* Animación CSS para el texto */
}

@keyframes animacion-texto {
  0% {
    opacity: 0;
    transform: translateY(20px); /* Mueve el texto 20px hacia arriba */
  }
  50% {
    opacity: 1;
    transform: translateY(0px); /* Devuelve el texto a su posición original */
  }
  100% {
    opacity: 0;
    transform: translateY(-20px); /* Mueve el texto 20px hacia abajo */
  }
}